<template>
  <div class="app-container">
    <Find
      :OriginalFilter="{ static: true }"
      :formList="formList"
      @findClicked="findClicked"
      :searchImg="false"
      @clickInput="clickInput"
      @filterMethod="filterMethod"
      @selectListShow="selectListShow"
    />
    <Find :formList="formList2" @findClicked="findClicked2" class="mt10" @selectChange="selectChange" />
    <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" class="mt10">
      <h1 class="f16">材料查询</h1>
      <Table
        :tableHeader="tableHeader"
        :tableData="tableData"
        class="mt10"
        :isLoading="isLoading"
        @currentRow="currentRow"
        :TableHeight="70"
        :outTableHeight="140"
      />
    </el-card>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
    <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
      <h1 class="f16">子材料查询</h1>
      <Table :tableHeader="tableHeader2" :tableData="tableData2" class="mt10" :isLoading="isLoading2" :TableHeight="30" :outTableHeight="140" />
    </el-card>

    <!-- 材料Dialog -->
    <el-dialog v-model="MtlSelectDialog" title="材料名称选择" width="60%" class="dialog pb0">
      <div class="flex">
        <span style="color: red">点击行选择</span>
        <el-input v-model="MtlName" placeholder="搜索品名" size="small" clearable style="width: 140px" class="ml10"></el-input>
      </div>
      <Table :isLoading="isLoading6" :tableHeader="MtNameTableHeader" :tableData="MtNameTableData" @currentRow="MtNameCurrentRow" :TableHeight="50" />
      <PageModule
        :PageData="{ total: MtNameTotal, pageSizeShow: true, buttonS: true }"
        :layout="'prev, pager'"
        @pageSizeChange="MtNameSizeChange"
        @pageChange="MtNameCurrentChange"
      />
    </el-dialog>
    <!-- 贴合材料处理 -->
    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
          <h1 class="f16">贴合子材料明细</h1>
          <Find :OriginalFilter="{ static: true }" :formList="formList9" :searchImg="false" @selectListShow="selectListShow" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
          <div class="flex">
            <h1 class="f16">子材料明细</h1>
            <el-button type="primary" class="primaryBth ml15" @click="mtlConfirmBtn">确认</el-button>
          </div>
          <Table :tableHeader="tableHeader10" :tableData="tableData10" class="mt10" :outTableHeight="350" @currentRow="mtlCurrentRow" />
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import { selectList } from '@/plugins/mixin'
import router from '@/router'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BusinessMaterial'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import service from '@/utils/request'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
const colorTotal = ref(0)
const colorPageSize = ref(40)
const colorCurrentPage = ref(1)
const formList = ref([
  {
    PageModule: true,
    total: colorTotal,
    handleSizeChange: (val: number) => {
      colorPageSize.value = val
      getColorList()
    },
    handleCurrentChange: (val: number) => {
      colorCurrentPage.value = val
      getColorList()
    },
    type: 'select',
    selectValue: '',
    selectP: '材料颜色',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '规格',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '单位',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '生成业务材料'
  },
  {
    type: 'button',
    checkboxLabel: '贴合材料处理'
  },
  {
    type: 'button',
    checkboxLabel: '>>转材料建档'
  }
]) as any
const formList2 = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '大类名称 大类代码',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '中类名称 中类代码',
    selectLabel: '',
    selectOptions: []
  },
  // {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '小类名称 小类代码',
  //   selectLabel: '',
  //   selectOptions: [],
  // },
  // {
  //   type: 'input',
  //   inputPlaceholder: '客户',
  //   inputValue: ''
  // },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单位',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '删除'
  }
]) as any
// 大类 中类 小类获取下拉框数据
const getSelectList = async (mid: any = '', small: any = '') => {
  let res = await service.get<any, any>('/back/mtlTypeLMSQuery', {
    params: {
      mtlType: small ? small : mid
    }
  })
  if (small) {
    formList2.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类名称 小类代码')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList2.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '小类名称 小类代码')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  } else if (mid) {
    formList2.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList2.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
    console.log(
      11111111,
      formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
        ?.selectOptions
    )
  } else {
    formList2.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
      ?.selectOptions.splice(0)
    res.forEach((item: any, index: any) => {
      formList2.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
        ?.selectOptions?.push({
          optionKey: index,
          optionValue: `${item.typeName}  ${item.typeNo}`,
          optionLabel: `${item.typeName}`,
          LeftLabel: `${item.typeName}`,
          RightLabel: `${item.typeNo}`
        })
    })
  }
}
onMounted(() => {
  getSelectList()
})
const selectChange = (val: any, selectP: any) => {
  if (selectP === '大类名称 大类代码') {
    getSelectList(formList2.value[0].selectValue.split('  ')[1])
    formList2.value[1].selectValue = ''
    formList2.value[2].selectValue = ''
  }
  if (selectP === '中类名称 中类代码') {
    getSelectList('', formList2.value[1].selectValue.split('  ')[1])
  }
}
const currentMtlNo = ref('')
const findClicked = async (content: string) => {
  if (content === '生成业务材料') {
    if (formList.value[0].selectValue === '' || formList.value[1].inputValue === '') {
      JMessage.warning('请选择材料颜色和名称')
      return
    }
    const res = (await LoginWork.post('/sdStyle/generateBMtl', {
      colorCode: formList.value[0].selectValue.split('  ')[0],
      mtlColor: formList.value[0].selectValue.split('  ')[1],
      mtlName: formList.value[1].inputValue,
      mtlNo: currentMtlNo.value,
      mtlSpec: formList.value[2].inputValue,
      mtlUnit: formList.value[3].inputValue
    })) as any
    if (res.code === 200) {
      JMessage.success('生成成功')
      getTableList()
    } else {
      JMessage.error('生成失败')
    }
  }
  if (content === '贴合材料处理') {
    if (formList.value[1].inputValue.includes('+')) {
      drawer.value = true
      formList9.value[0].inputValue = currentMtlNo.value
      formList9.value[1].inputValue = formList.value[1].inputValue
      formList9.value[2].inputValue = formList.value[2].inputValue
      formList9.value[3].inputValue = formList.value[3].inputValue
      getTableList10()
    } else {
      JMessage.error('材料必须为贴合')
    }
  }
  if (content === '>>转材料建档') {
    router.push('/Develop/RYDevelopment/DevelopMaterials')
  }
}
const clickInput = (item: any) => {
  if (item.inputPlaceholder === '请输入材料名称') {
    MtlSelectDialog.value = true
    getMtNameTableList()
  }
}
// 材料颜色下拉框
const getColorList = debounce(async () => {
  let mtlColor = ''
  formList.value[0].selectValue === '' ? (mtlColor = '') : (mtlColor = encodeURIComponent(formList.value[0].selectValue))
  const Color = (await LoginWork.get(
    `/sdStyle/getColorWithCode?color=${mtlColor}&pageNum=${colorCurrentPage.value}&pageSize=${colorPageSize.value}&choose=${2}`
  )) as any
  formList.value[0].total = Color.data.total
  formList.value[0].selectOptions = Color.data.list.map((item: any) => {
    return {
      LeftLabel: item.colorCode,
      RightLabel: item.colorName,
      optionValue: `${item.colorCode}  ${item.colorName}`,
      optionLabel: item.colorName
    }
  })
}, 500)
// 规格下拉框
const getSpecList = debounce(async () => {
  const res = await LoginWork.get('/back/getMtlUS1')
  formList.value[2].selectOptions = res.data.specs.map((item: any) => {
    return { optionLabel: item, optionKey: item }
  })
}, 500)
// 材料颜色分页器配置项
const filterMethod = (val: any, selectOptions: any, copyOptions: any, item: any) => {
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '材料颜色') {
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '材料颜色').selectValue =
      val
    getColorList()
  } else if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '规格') {
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '规格').selectValue = val
    getSpecList()
  }
}
const selectListShow = (visible: any, item: any) => {
  console.log(item)

  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '材料颜色' && visible) getColorList()
  if (!visible) item.selectOptions = []
}

// 材料名称下拉框模块：
const MtlSelectDialog = ref(false)
const MtlName = ref('')
const MtNameTableHeader = ref([
  {
    label: '料号',
    prop: 'mtlNo'
  },
  {
    width: '200',
    label: '品名',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '类别代码',
    prop: 'typeNo'
  },
  {
    label: '类别名称',
    prop: 'typeName'
  }
])
const MtNameTableData = ref([])
const MtNameTotal = ref(0)
const MtNameSize = ref(40)
const MtNameCurrent = ref(1)
const isLoading6 = ref(false)
const getMtNameTableList = debounce(async () => {
  isLoading6.value = true
  const res = (await service.post('/material/mtl/sdMtlNewList', {
    custom: '',
    mtlColor: '',
    mtlName1: MtlName.value,
    mtlName2: '',
    mtlName3: '',
    mtlNo: '',
    mtlSpec1: '',
    mtlSpec2: '',
    mtlUnit: '',
    pageNum: MtNameCurrent.value,
    pageSize: MtNameSize.value,
    typeName: '',
    typeNo1: '',
    typeNo2: ''
  })) as any
  isLoading6.value = false
  MtNameTotal.value = res.total
  MtNameTableData.value = res.list
}, 500)
const MtNameSizeChange = (val: number) => {
  MtNameSize.value = val
  getMtNameTableList()
}
const MtNameCurrentChange = (val: number) => {
  MtNameCurrent.value = val
  getMtNameTableList()
}
// 点击材料名称下拉框表格中的当前行
const MtNameCurrentRow = (row: any, index: any) => {
  // console.log(row);
  formList.value[1].inputValue = row.mtlName
  formList.value[2].inputValue = row.mtlSpec
  formList.value[3].inputValue = row.mtlUnit
  currentMtlNo.value = row.mtlNo
  MtlSelectDialog.value = false
}
watch(MtlName, () => {
  getMtNameTableList()
})

// 表一模块
const tableHeader = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  }
])
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '导出') {
    const res = (await fileRequest.post(`/sdStyle/busMtlDownload`, {
      custom: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '客户')
        ?.selectValue,
      mtlColor: formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
      )?.inputValue,
      mtlName1: formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料名称'
      )?.inputValue,
      mtlName2: '',
      mtlName3: '',
      mtlNo: '',
      mtlSpec1: '',
      mtlSpec2: formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入规格'
      )?.inputValue,
      mtlUnit: formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
      )?.inputValue,
      typeName: '',
      typeNo1: formList2.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
        ?.selectValue?.split(' ')[2],
      typeNo2: formList2.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
        ?.selectValue?.split(' ')[2]
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `业务材料汇总表${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '删除') {
    const res = (await LoginWork.post(`/sdStyle/busMtlDelete?mtlNo=${currentTableRow.value.mtlNo}`)) as any
    if (res.code === 200) {
      JMessage.success('删除成功')
      getTableList()
    } else [JMessage.error(res.message)]
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/sdStyle/getSdBomMtl', {
    custom: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '客户')
      ?.selectValue,
    mtlColor: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    mtlName1: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料名称'
    )?.inputValue,
    mtlName2: '',
    mtlName3: '',
    mtlNo: '',
    mtlSpec1: '',
    mtlSpec2: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入规格'
    )?.inputValue,
    mtlUnit: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
    )?.inputValue,
    typeName: '',
    typeNo1: formList2.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '大类名称 大类代码')
      ?.selectValue?.split(' ')[2],
    typeNo2: formList2.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '中类名称 中类代码')
      ?.selectValue?.split(' ')[2],
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.list
  total.value = tableDataList.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList2.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  getTableList2()
}

const tableHeader2 = ref([
  {
    label: '物料编码',
    prop: 'subMtlNo'
  },
  {
    label: '颜色',
    prop: 'subMtlColor'
  },
  {
    label: '材料名称',
    prop: 'subMtlName'
  },
  {
    label: '规格',
    prop: 'subMtlSpec'
  },
  {
    label: '单位',
    prop: 'subMtlUnit'
  },
  {
    label: '加工方式',
    prop: 'prdType'
  },
  {
    label: '比例',
    prop: 'percent'
  },
  {
    disable: true,
    type: 'checkbox',
    label: '是否请购',
    prop: 'purFlag'
  }
])
// 表二模块
const tableData2 = ref([])
const isLoading2 = ref(true)
// 获取表数据
const getTableList2 = async () => {
  isLoading2.value = true
  let tableDataList = await LoginWork.get<any, any>(`/sdStyle/getSdMtlSubFit?mtlNo=${currentTableRow.value ? currentTableRow.value.mtlNo : ''}`)
  isLoading2.value = false
  tableData2.value = tableDataList.data
  // currentRow2()
}

// 贴合材料处理
const drawer = ref(false)
const tableHeader10 = ref([
  {
    label: '颜色',
    prop: 'subMtlColor'
  },
  {
    width: '200',
    change: true,
    label: '材料名称',
    prop: 'subMtlName'
  },
  {
    change: true,
    label: '规格',
    prop: 'subMtlSpec'
  },
  {
    change: true,
    label: '单位',
    prop: 'subMtlUnit'
  },
  {
    change: true,
    label: '加工方式',
    prop: 'prdType'
  },
  {
    label: '比例',
    prop: 'percent'
  },
  {
    disable: true,
    type: 'checkbox',
    label: '是否请购',
    prop: 'purFlag'
  }
])
const tableData10 = ref([])
const formList9 = ref([
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '物料编码',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '材料名称',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '规格',
    inputValue: ''
  },
  {
    inputDisabled: true,
    type: 'input',
    inputPlaceholder: '单位',
    inputValue: ''
  }
]) as any
const getTableList10 = async () => {
  let tableDataList = await LoginWork.get<any, any>(`/sdStyle/getSdMtlSubNew?mtlNo=${currentMtlNo.value}`)
  if (tableDataList.code == 200) {
    tableData10.value = tableDataList.data.map((item: any) => {
      item.disableConfirm = true
      item.change = 'Y'
      item.purFlag = item.purFlag === 'Y' ? true : false
      return item
    })
  }
}

// 子材料明细确认
const mtlConfirmBtn = async () => {
  const res = (await LoginWork.post('/sdStyle/subFitOption', tableData10.value)) as any
  if (res.code === 200) {
    JMessage.success('确认成功')
    drawer.value = false
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
const mtlCurrentTableRow = ref({})
const mtlCurrentRow = (row: any) => {
  mtlCurrentTableRow.value = row
}
</script>

<style lang="less" scoped>
:deep(.el-form-item:nth-child(2)) {
  .el-input {
    width: 200px;
  }
}

:deep(.el-form-item:nth-child(1)) {
  .el-select {
    width: 200px !important;
  }
}

:deep(.el-form-item:nth-child(2)) {
  .el-select {
    width: 200px !important;
  }
}

:deep(.el-form-item:nth-child(3)) {
  .el-select {
    width: 200px !important;
  }
}
</style>
